<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            height: 500px;
            width: 600px;
            margin: 0 auto;
            border :solid  1px  red;
            position: relative;
        }
        .square_div {
                float: left;
                height: 160px;
                width: 180px;
                margin-top: 30px;
                border-radius: 6px;
                background-color: #ffffff;
                box-shadow: 0px 0px 5px 5px rgba(152, 152, 152, 0.07); /* 设置一个阴影 颜色 透明度 */
                cursor: pointer; /* 鼠标在此处的效果为“小手”样式 */
                margin-right: auto;
                margin-left: auto;
            }
        .square_div:hover {
            -webkit-transform: scale(1.11, 1.11);
            -moz-transform: scale(1.11, 1.11);
            -transform: scale(1.11, 1.11);
            transition-duration: 0.5s; /* 缩放的过渡时间 */
        }
        .square_div .s-s01 {
            height: 43px;
            width: 43px;
            margin-top: 38px;
            margin-right: auto;
            margin-left: auto;
        }
          .square_div .s-s02 {
            height: 25px;
            width: 120px;
            margin-top: 18px;
            margin-right: auto;
            margin-left: auto;
            font-size: 0.9em;
            color: #1a1a1a;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="one">
    <div class="square_div">
        <div class="s-s01"><img src="/static/img/code.jpg"alt="" width="43" height="43"></div>
        <div class="s-s02">微信支付</div>
    </div>
</div>
</body>
</html>